iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
0
自我挑戰組

半路出家的工程師重新認識 JavaScript系列 第 6

06. Speaking JavaScript - 基礎篇 (2)

  • 分享至 

  • xImage
  •  

今日為平安夜,祝大家晚上出去不要被閃瞎眼QQ

運算子 (Operators)

常見的運算子有

  • 指定運算子
  • 相等性運算子
  • 順序運算子
  • 加法運算子
  • Boolean 及數字運算子
  • 特殊以及其他運算子

指定運算子

我們在宣告變數的時候,可以指定值給宣告過的變數

指定的方式有下面幾種

> var x; // 宣告變數 x
> x = 1; // 將數字值1指定給 x
> var y = 1; // 宣告並指定數字值1給變數 y

> var friend = {}; // 宣告一個 friend 的空物件
> friend.name = 'John' // 設定 friend 的 name 特性值為 John

> var arr = ['apple', 'banana', 'cherry'];
> arr[0] = 'durian'; // 將 arr 陣列第一個元素的值指定為 'durian'

複合指定運算子

用加法運算子為例


> var x = 2;
> x += 3; // x += 3 等同於 x = x + 3
5
> x
5

所以看到 +=, -=, /=, %= 等等都是屬於複合指定運算子

myvar op= value
myvar = myvar op value
op 可以用 +,-,%,/ 等代入


相等性運算子

在 JavaScript 世界中,判斷兩個值是否相等有兩個方式

  • 嚴格相等性 (===)、嚴格不相等性(!==) 只考量具有同樣型別的值是否相等
  • 寬鬆相等(==)、不相等(!=) 會先轉換不同型的值再進行嚴格相等或不相等的方式比較

目前普遍都認為沒有使用寬鬆相等(==)、不相等(!=)的理由

第一是他進行轉換的方式匪夷所思,第二是型別錯誤會被忽略

在寬鬆相等、不相等的運作如下

  • undefined == null // true
  • 一個字串與一個數字比較時,會將字串轉為數字,再用嚴格相等性來比較他們
  • 一個 boolean與一個非 boolean,那會將 boolean 轉換成一個數字並再次以寬鬆相等性比較
  • 一個物件與一個數字或字串,那會將物件轉換成一個基本值(昨天講到的那幾個)並再次以寬鬆相等比較

> undefined === undefined
true
> null === null
true

// 兩個數字比較

> 1 === 1 // x === x // 除非 x 是 Nan
true
> +0 === -0
true
> Nan === Nan // 後面有講到 Number 章節會在介紹這個 NaN (Not a number)
false

// 兩個物件
> var obj1 = {};
> var obj2 = {};
> obj1 === ojb2
false
> obj1 === obj1
true

// 寬鬆相等性 Boolean 常見陷阱

> 2 == true  // 2 === 1
false
> 2 == false // 2 === 0
false

> 1 == true  // 1 === 1
true
> 0 == false // 0 === 0
true

// 寬鬆相等性 字串常見陷阱
> '' == false // 0 === 0
true
> '1' == true // 1 === 1
true
> '2' == true // 2 === 1
false
> 'abc' == true // Nan === 1
false

順序運算子

  • 小於 (<)
  • 小於或等於 (<=)
  • 大於 (>)
  • 大於或等於 (>=)
> 7 > 5
true
> 5 <= 5
true

加法運算子

當我們要將兩個數字相加或將兩個字串串時會使用

要特別注意只要兩個運算元其中只要有一個是字串,那另一個也會被轉為字串

> var a = 3;
> var b = 4;
> var c = 'John';
> var d = ['apple', 'banana'];
> a + b
7
> a + c
'3John'
> c + d
'3apple,banana'
> (a + b) + c
'7John'
> a + (b + c)
'34John'

條件式運算子

«condition» ? «if_true» : «if_false»

如果 condition 為 true,那結果為 if_true,否則結果為 if_false

> 1 === 2 ? 'Yes' : 'No'
'No'

今日總結

上面介紹了常見的運算子用法及些許地雷

相信大家對於 JavaScript 的認識又更往前邁進了一小小小步

有些比較特殊的像位元運算子、typeof、instanceof 等

我本身還沒使用過,初學者應該也還不會碰到

等基礎篇部分告一個段落後,會再回頭來補充~

預計明日會介紹基礎型別 Boolean 及 Number


上一篇
05. Speaking JavaScript - 基礎篇 (1)
下一篇
07. Speaking JavaScript - 基礎篇 (3)
系列文
半路出家的工程師重新認識 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言